<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/conmmon.css">
 
    <script src="js/jquery.min.js"></script>
</head>
<style>
    .personal{
      height: 100%;
      width: 800px;
      margin-left: 0 auto;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      padding: 30px;
    }

    .card {
      width: 100%;
      height: auto;
      background-color: rgba(255, 255, 255,0);
      border-radius: 10px;  
    }
    .card span{
      margin-left: 20px;
    }
   
   
 
  .touxiang{
    display: inline-block;
    vertical-align: middle;
    height:40px;
    width:40px;
    margin-top: 25px;
  }
  .name{
    font-weight: bolder;
    font-size: 20px;
  }
  .basic{
    font-size: 30px;
    font-weight: bolder;
    margin-top: 10px;
  }
  /* .one{
    font-weight: bold;
    font-size: 16px;
    color:#616360;
    }
    a{
        text-decoration: none;
    }
    .two{
        color: black;
        font-size: 15px;
    }
    .three{
        color: #75A4EF;
        font-size: 15px;
        font-weight: lighter;
    } */

  .basics{
    font-size: 20px;
    margin-top: 30px;
  }
  .basic button{
    margin-left: 20px;
  }
  .one1{
    margin-top: 10px;
    font-weight: bolder;
  }
  .one1 a{
    color: rgb(116, 112, 112);
    font-size: 15px;
  }
  .one{
    font-weight: bolder;
    width: 100px;
    display: inline-block;
  }
  .two{
        color: rgb(116, 112, 112);
        font-size: 15px;
  }

  #photo{
    display:none;
  }
  #headimage{
    display: none;
  }


</style>
<body>
   <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="mydraft_list.html">草稿</a>
        <a href="myblog_list.html">我的文章</a>
        <a href="admin_blog_list_all.html" id="adminPage">返回管理员页面</a>
        <a href="javascript:logout()">注销</a>
        <!-- <a href="#">注销</a> -->
    </div>

    <div class="container">
      <div class="personal">
        <div class="card">
          <img src="img/doge.jpg" onclick="updatePhoto()" id="myphoto" class="avtar" >

          <form id="headimage">
            <input type="file" id="photo" accept=".png , .jpg , .jepg">
          </form>
         
          昵称：<span class="name" id="name">焦子豪&nbsp;&nbsp;</span>
          <a href="update_personal.html">修改信息</a>
       
        </div>
        
        <div class="basic">基本信息</div>


        <div class="basics">
          <div class="one1">
            <span class="one" >所在学校:</span>  
            <span class="two" id="school"></span>&nbsp;&nbsp; 
          </div> 
          <div class="one1">
            <span class="one">手机号码:</span>
            <span class="two" id="phone"></span>&nbsp;&nbsp;
          </div>   
          <div class="one1"> 
            <span class="one" >邮箱地址:</span>
            <span class="two" id="email"></span>&nbsp;&nbsp;
          </div>    
          <div class="one1">
            <span class="one"> 博客：</span>
            <a href="" class="three" id="blog"> </a>&nbsp;&nbsp;
          </div>
          <div class="one1">
            <span class="one" > github：</span>
            <a href="" class="three" id="github"></a>&nbsp;&nbsp;
          </div>
          <div class="one1">
            <span class="one"> 修改密码：</span>
            <a href="update_password.html">修改</a>
          </div>
          <div class="one1">
            <span class="one"> 密保问题：</span>
            <a href="safe_question.html">设置</a>
          </div>

        </div>
        

      </div>     
    </div>

    <script>



        //修改头像
        function updatePhoto(){
          //点击头像，弹出文件选择框
          jQuery("#photo").click();
          //当photo内容改变时触发
          jQuery("#photo").change(function(){
            var formdata = new FormData();
            formdata.append("file",jQuery("#photo")[0].files[0]);
            // alert(fd);
            //传数据
            jQuery.ajax({
              type:"POST",
              url:"/user/subphoto",
              data:formdata,
              contentType:false,
              processData:false,
              success:function(result){
                if(result !=null && result.code==200){
                  alert("头像上传成功");
                  showPersonalInfo();
                }else{
                  alert("头像上传失败，请稍后重试");
                }
              }
            });



          });
          
        }
      




        //显示个人信息
        function showPersonalInfo(){
          //通过ajax向服务器请求当前登录用户数据
          jQuery.ajax({
            url:"/personal/showpersonalinfo",
            type:"POST",
            data:{},
            success:function(result){
              if(result.code==200){
                jQuery("#adminPage").hide();
              }
              if(result!=null){
                //在对应位置显示出信息
                if(result.data==null){
                  jQuery("#myphoto").attr("src",result.msg)
                  jQuery("#name").text("");
                  jQuery("#school").text("");
                  jQuery("#phone").text("");
                  jQuery("#email").text("");
                  jQuery("#blog").text("");
                  jQuery("#blog").attr("href","");
                  jQuery("#github").text("");
                  jQuery("#github").attr("href","");
                }
                var personal = result.data;
                jQuery("#myphoto").attr("src",result.msg)
                jQuery("#name").text(personal.name);
                jQuery("#school").text(personal.school);
                jQuery("#phone").text(personal.phone);
                jQuery("#email").text(personal.email);
                jQuery("#blog").text(personal.blog);
                jQuery("#blog").attr("href",personal.blog);
                jQuery("#github").text(personal.github);
                jQuery("#github").attr("href",personal.github);
              }
              if(result.code==-1){
                alert("修改信息失败")
              }
            }
          });


        }
        showPersonalInfo();







    //退出登录
    function logout(){
            if(confirm("确认注销？")){
                jQuery.ajax({
                    url:"/art/logout",
                    type:"POST",
                    data:{},
                    success:function(result){
                        if(result!=null && result.code == 200){
                            location.href = "/login.html";
                        }
                    }
                });
            }
        }




    </script>




  </body>

</html>